<template>
  <CommonPage show-footer>
    <div class="w-full f-c-c">
      <div class="max-w-900 w-full flex justify-between gap-x-28">
        <div class="flex-1 rounded-10 p-20" border="solid 1px #ccc">
          <h3 class="m-b-20 text-center">修改信息</h3>
          <n-form
              ref="userInfoRef"
              :model="userInfoValue"
              :rules="userInofRules"
              label-placement="left"
              label-align="right"
              label-width="58px"
              :show-require-mark="false"
          >
            <n-form-item label="用户名">
              <n-input v-model:value="userInfoValue.username" disabled placeholder=""></n-input>
            </n-form-item>
            <n-form-item label="姓名">
              <n-input v-model:value="userInfoValue.name" disabled placeholder=""></n-input>
            </n-form-item>
            <n-form-item label="角色">
              <n-input v-model:value="userInfoValue.role" disabled placeholder=""></n-input>
            </n-form-item>
            <n-form-item label="电话" path="phone">
                <n-input v-model:value="userInfoValue.phone" placeholder=""></n-input>
            </n-form-item>
            <n-form-item label="邮箱" path="email">
              <n-input v-model:value="userInfoValue.email" placeholder=""></n-input>
            </n-form-item>
            <n-form-item class="f-c-c">
              <n-button type="primary" @click="onSaveUserInfo">保存</n-button>
            </n-form-item>
          </n-form>
        </div>
        <div class="flex-1 rounded-10 p-20" border="solid 1px #ccc">
          <h3 class="m-b-20 text-center">修改密码</h3>
          <n-form
              ref="pwdInfoRef"
              :model="pwdInfoValue"
              :rules="pwdInforRules"
              label-placement="left"
              label-align="right"
              label-width="68px"
              :show-require-mark="false"
          >
            <n-form-item label="当前密码" path="password">
              <n-input
                  v-model:value="pwdInfoValue.password"
                  type="password"
                  placeholder=""
              ></n-input>
            </n-form-item>
            <n-form-item label="新密码" path="newPassword">
              <n-input
                  v-model:value="pwdInfoValue.newPassword"
                  type="password"
                  placeholder=""
              ></n-input>
            </n-form-item>
            <n-form-item label="确认密码" path="confirmPassword">
              <n-input
                  v-model:value="pwdInfoValue.confirmPassword"
                  type="password"
                  placeholder=""
              ></n-input>
            </n-form-item>
            <n-form-item class="f-c-c">
              <n-button type="primary" @click="onSavePwd">保存</n-button>
            </n-form-item>
          </n-form>
        </div>
      </div>
    </div>
  </CommonPage>
</template>

<script setup>
import { ref } from 'vue'
import api from '@/api/admin'
import { confirmPasswordRule, emailRule, requiredRule, strictPasswordRule } from '@/utils/validator'
import { useUserStore } from '@/store'
import sha256 from 'crypto-js/sha256';
import { generateRandomString } from '@/utils';
const userStore = useUserStore()
const id = userStore.getId()
const DEFAULT_PWD_VALUE = {
	pass:'',
	password: '',
	newPassword: '',
	confirmPassword: '',
}
const userInfoRef = ref(null)
const pwdInfoRef = ref(null)
const userInfoValue = ref({
  id: id,
  name: '',
  username: '',
  role: '',
  phone: '',
  email: '',
})
const pwdInfoValue = ref({ ...DEFAULT_PWD_VALUE })
const userInofRules = ref({
  username: requiredRule('用户名'),
  chineseName: {
    required: true,
    trigger: 'blur',
    min: 2,
    message: '中文名不能少于2位',
  },
})
const pwdInforRules = ref({
  password: requiredRule('密码'),
  newPassword: strictPasswordRule(),
  confirmPassword: confirmPasswordRule(pwdInfoValue, 'newPassword'),
})
//获取用户数据
const getUserInfo = async () => {
  try {
    const res = await api.findAdminById({
      params: {
	      id: id
      }
    })
    if(res.code === 200) {
			userInfoValue.value = {...res.data}
	    pwdInfoValue.value.pass = res.data.password
    }
  } catch (err) {
    $message.error(err.message)
  }
}

const onSaveUserInfo = () => {
  userInfoRef.value?.validate(async (errors) => {
    if (!errors) {
      try {
        await api.updateAdmin({
          ...userInfoValue.value,
        })
        $message.success('修改用户信息成功')
        await getUserInfo(userStore.getId())
      } catch (err) {
        $message.error(err.message)
      }
    }
  })
}
const onSavePwd = () => {
  pwdInfoRef.value?.validate(async (errors) => {
    if (!errors) {
      if (pwdInfoValue.value.password===pwdInfoValue.value.pass){
      try {
        const res = await api.updateAdmin({
          id:id,
          password: pwdInfoValue.value.newPassword.trim(),
        })
        if(res.code === 200) {
	        $message.success('修改密码成功')
	        pwdInfoValue.value = { ...DEFAULT_PWD_VALUE }
        }
      } catch (err) {
				$message.error("修改密码失败！")
      }
      }else {
        $message.error('旧密码错误')
      }
    }
  })
}

// 执行
getUserInfo()
</script>
